import { Button, Checkbox, Form, Input, Space } from "antd";
import { FC, useEffect } from "react";
import { OptionType, QuestionCheckboxPropsType } from "./interface";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { nanoid } from "nanoid";

const PropComponent: FC<QuestionCheckboxPropsType> = (props) => {
  const { title, list, isVertical, onChange, disabled } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      title,
      list,
      isVertical,
    });
  }, [title, list, isVertical]);

  const handleValueChange = () => {
    if (!onChange) return;

    const values = form.getFieldsValue();
    const { list = [] } = values;
    list.forEach((opt: OptionType) => {
      if (!opt.value) opt.value = nanoid(5);
    });

    onChange(values);
  };

  return (
    <Form
      disabled={disabled}
      form={form}
      layout="vertical"
      initialValues={{ title, list, isVertical }}
      onValuesChange={handleValueChange}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: "请输入标题" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="list">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }, index) => {
                return (
                  <Space key={key}>
                    <Form.Item name={[name, "checked"]} valuePropName="checked">
                      <Checkbox></Checkbox>
                    </Form.Item>
                    <Form.Item
                      name={[name, "label"]}
                      rules={[
                        { required: true, message: "请输入选项文字" },
                        {
                          validator: async (_, text) => {
                            const { list } = form.getFieldsValue();
                            let num = 0;
                            list.forEach((option: OptionType) => {
                              if (option.label === text) num++;
                            });
                            if (num === 1) {
                              return Promise.resolve();
                            }
                            return Promise.reject(
                              new Error("和其他选项重复了")
                            );
                          },
                        },
                      ]}
                    >
                      <Input placeholder="输入选项文字..." />
                    </Form.Item>
                    {index > 0 && (
                      <Form.Item>
                        <MinusCircleOutlined
                          style={{ cursor: "pointer" }}
                          onClick={() => remove(name)}
                        />
                      </Form.Item>
                    )}
                  </Space>
                );
              })}
              <Form.Item>
                <Button
                  type="link"
                  icon={<PlusOutlined />}
                  onClick={() => add({ label: "", value: "", checked: false })}
                  block
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item name="isVertical" valuePropName="checked">
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
